<!--通用选择列表页面，使用方法-->
<!--父组件声明该组件，并使用变量控制显示隐藏，然后实现接收数据方法即可-->
<!--Url：请求路径-->
<!--<page-select-xm-list  v-if="showSelectPage" v-on:update-flag="showSelectPage=false" v-on:select-item="handleSelectItem"-->
<!--     :pageTitle="'选择合作伙伴'" :url="'partnerBasic$api$findAll'"-->
<!--     :body-param="{}" :query-param="{}"-->
<!--</page-select-xm-list>-->
<template>
    <div class="page-select-xm-list">

        <van-popup v-model="isShow" position="bottom" get-container="body" :style="{ height: '100%', width: '100%' }">

            <div class="titlebar bg-theme color-f text-l">
                
                <i class="iconfont icon-fanhui font19 pl08 iback" @click="goBack"></i>
                <!-- 详情进入 -->
                <span class="font19 ml16 ">{{ pageTitle }} </span>
            </div>

            <van-pull-refresh v-model="tabRefreshing" @refresh="tableViewRefresh">
                <van-list v-model="tableViewLoading" :finished="tableViewFinished" :finished-text='requestNoMoreMessage'
                    :error-text="requestErrorMessage" @load='tableViewLoadMore' style="margin-bottom: 50px;">

                    <van-cell v-for="(item, index) in tableViewDataList" :key="index" @click="onItemSelected(item)">
                        <slot name="body" :item="item" :index="index"></slot>
                    </van-cell>

                    <!-- 请求第一页数据时，出现错误或无数据 展示空白提示界面 请求后续数据时，只做弹窗提示 -->
                    <div v-show="showEmptyView" class="text-c">
                        <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                            style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                    </div>

                    <div v-show="showErrorView" class="text-c">
                        <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                            alt="获取数据失败" style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                        <div class="color-b font14" style="margin: 20px 0 0 15px">
                            {{ requestErrorMessage }}
                        </div>
                    </div>

                </van-list>
            </van-pull-refresh>
        </van-popup>
    </div>
</template>

<script>

import { requestPageListData } from "@/api/dictapi";
import jTool from "@/assets/js/jHelper";
import util from '@/assets/js/public';
import { Toast } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";
export default {
    props: {
        pageTitle: {
            type: String,
            default: '选择列表',
        },
        url: {
            type: String,
            required: true
        },
        
        withoutKV: {
            type: Object,
            default: () => { }
        },
        withoutBody: {
            type: Object,
            default: () => { }
        },

    },
    data() {
        return {
            isShow: true,
            currentPage: 1,
            pageParam: {
                page: 1, rows: 20, size: 20,
            },

            requestNoMoreMessage: '',
            requestErrorMessage: '',

            tableViewDataList: [],
            tabRefreshing: false,
            tableViewLoading: false,
            tableViewFinished: false,
        }
    },

    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),

        showEmptyView() {
            return this.pageParam.page === 1 && this.tableViewDataList.length === 0 && jTool.stringIsEmpty(this.requestErrorMessage);
        },

        showErrorView() {
            return this.pageParam.page === 1 && !jTool.stringIsEmpty(this.requestErrorMessage);
        }

    },

    created() {

        this.tableViewDataList = []
        this.tableViewRefresh();
    },

    methods: {
        goBack() {
            this.isShow = false;
            this.$emit('update-flag', false)
        },
        onItemSelected(value) {
            this.isShow = false;
            this.$emit('select-item', value)
        },

        tableViewRefresh() {
            this.pageParam.page = 1;
            this.tabRefreshing = true;
            this.tableViewLoading = true;
            this.tableViewFinished = false;
            this.requestListDatas();
        },

        tableViewLoadMore() {
            if (!jTool.stringIsEmpty(this.requestNoMoreMessage)) {
                this.tableViewLoading = false
                this.tableViewFinished = true;
            }
            else {
                this.tabRefreshing = false;
                this.requestListDatas();
            }
        },

        requestListDatas() {

            if (this.pageParam.page == 1) {
                Toast.loading({
                    message: '加载中',
                    forbidClick: false
                });
            }

            let realKV = {
                'currentUserCode': util.encrypt(this.user.userName),
                'source': 'MOBILE', ...this.pageParam, ...this.withoutKV
            }

            let realBody = { ...this.pageParam, ...this.withoutBody }
            console.log(realBody, this.withoutBody);
            requestPageListData(this.url, realKV, realBody) .then((result) => {

                    Toast.clear();
                    if (result.responseid == 1) {//请求成功
                        let listdetails = [];
                        if (result.data.data.content) {
                            listdetails = listdetails.concat(result.data.data.content);
                        }

                        if (this.pageParam.page == 1) {
                            this.tableViewDataList = listdetails;
                        } else {
                            this.tableViewDataList = this.tableViewDataList.concat(listdetails);
                        }

                        if (result.data.data.totalPages <= this.pageParam.page) {
                            this.requestNoMoreMessage = '没有更多数据！';
                            this.tableViewFinished = true;
                        } else {
                            this.pageParam.page++;
                            this.requestNoMoreMessage = '';
                        }
                        this.requestCompletion('');
                    } else {
                        this.tableViewFinished = true;
                        this.requestCompletion(result.message);
                    }
                }).catch((error) => {
                    Toast.clear();
                    this.tableViewFinished = true;
                    this.requestCompletion('获取数据失败,请稍后重试');
                });
        },


        requestCompletion(error) {
            this.tabRefreshing = false;
            this.tableViewLoading = false

            if (!jTool.stringIsEmpty(error)) {
                this.requestErrorMessage = error;
                Notify({ type: 'warning', message: error })
            }
        }
    }
}
</script>

<style scoped>
.titlebar {
    width: 100%;
    height: 50px;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    display: flex;
    align-items: center;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>